import React from 'react'
import { useRef } from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import { Link } from 'react-router-dom'

export default function NotFound() {
  const history = useHistory()
  const [num, setNum] = useState(10)
  const timer = useRef(0)
  useEffect(() => {
    timer.current = setInterval(() => {
      setNum((num) => num - 1)
    }, 1000)
    return () => {
      clearInterval(timer.current)
    }
  }, [])
  useEffect(() => {
    if (num <= 1) {
      history.push('/home')
    }
  }, [num, history])
  return (
    <div>
      <h1>对不起您访问的页面不存在</h1>
      <h4>
        {num}秒后返回首页( 或点击立即:<Link to="/home">返回首页</Link>)
      </h4>
    </div>
  )
}
